<template>
    <div class="warningInfo">
        <div
            v-for="(item, index) in list"
            :key="index"
            class="warningInfo-item"
            :style="{backgroundColor: (index + 1) % 2 === 0 ? '' : '#07226f'}"
        >
            <div class="warningInfo-item-title" @click="handleChangeExpand(item.class, index)">
                <span class="warningInfo-item-title-left">
                    <span>{{ item.title }}</span>
                    <span style="margin-right: 20px">{{ item.value }}</span>
                </span>
                <i :class="item.class" style="color: rgb(127 144 186)"></i>
            </div>
            <div class="warningInfo-item-section" v-show="item.show">
                {{ item.content }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'warningInfo',
    data() {
        return {
            activeNames: [],
            list: [
                {
                    title: '过载跳电',
                    show: false,
                    value: 0,
                    class: 'el-icon-arrow-right',
                    content: '过载跳电内容...'
                },
                {
                    title: '恶性跳电',
                    value: 0,
                    show: false,
                    content: '恶性跳电内容...',
                    class: 'el-icon-arrow-right'
                },
                {
                    title: '网管离线',
                    value: 0,
                    show: false,
                    content: '网管离线内容...',
                    class: 'el-icon-arrow-right'
                },
                {
                    title: '仪表离线',
                    value: 0,
                    show: false,
                    content: '仪表离线内容...',
                    class: 'el-icon-arrow-right'
                },
                {
                    title: '欠费告警',
                    value: 0,
                    content: '欠费告警内容...',
                    show: false,
                    class: 'el-icon-arrow-right'
                }
            ]
        }
    },
    methods: {
        handleChange(val) {
            console.log(val)
        },
        // 折叠、展开
        handleChangeExpand(myClass, index) {
            const newList = [...this.list]
            newList[index].class = myClass === 'el-icon-arrow-right' ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
            newList[index].show = !newList[index].show
            this.list = [...newList]
        }
    }
}
</script>


<style lang="scss" scoped>
.warningInfo {
    width: 100%;
    height: calc(100vh - 778px);
    color: rgba(255, 255, 255, 0.8);
    overflow-y: auto;
    margin-top: 5px;

    .warningInfo-item {
        .warningInfo-item-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 5px 5px 15px;
            // font-size: 18px;
            .warningInfo-item-title-left {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
            }
        }
        .warningInfo-item-section {
            padding: 15px;
            text-indent: 18px;
        }
    }
    /* 设置滚动条宽度 */
    &::-webkit-scrollbar {
        width: 8px; // 滚动条宽度
    }

    /* 设置滚动条轨道背景 */
    &::-webkit-scrollbar-track {
        background: #050d4b; // 滚动条轨道背景颜色
        border-radius: 4px; // 可选：圆角
    }

    /* 设置滚动条滑块颜色 */
    &::-webkit-scrollbar-thumb {
        background: rgba(7 41 137); // 滚动条滑块颜色
        border-radius: 4px; // 可选：圆角
    }

    /* 设置滚动条滑块悬停颜色 */
    &::-webkit-scrollbar-thumb:hover {
        background: #050d4b; // 悬停时滑块颜色
    }
}
</style>